import React, {useState} from 'react';
import {Checkbox, Pagination, Table} from "antd";
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import BacchOpe from './batchOperation'
import './style/queryTable.scss'
import {useNavigate} from "react-router-dom";
import { useSelector,useDispatch } from 'react-redux'

interface DataType {
    key: React.Key;
    name: string;
    imgUrl: string
    joinTime: String,
    consumptionTime: String,
    consumptionMoney: Number | String,
    consumptionNumber: Number,
    consumptionMoneySum: Number | String,
    integral: Number,
    integralSum: Number
}




const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: DataType) => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
    }),
};



const QueryTable = (props:any) => {
    const columns: ColumnsType<DataType> = [
        {
            title: '客户姓名',
            dataIndex: 'name',
            render: (text: string, record: DataType, index: number) => (
                <div className='TableQuery'>
                    <img className='TableQuery__img' src={record.imgUrl}/>
                    <div>
                        <a>{text}</a>
                        <p>111</p>
                    </div>
                </div>
            ),
            width: 210
        },
        {
            title: '加入时间',
            dataIndex: 'joinTime',
        },
        {
            title: '最近消费时间',
            dataIndex: 'consumptionTime'
        },
        {
            title: '消费金额',
            dataIndex: 'consumptionMoney'
        },
        {
            title: '消费次数',
            dataIndex: 'consumptionNumber'
        },
        {
            title: '累计消费金额',
            dataIndex: 'consumptionMoneySum'
        },
        {
            title: '当前积分',
            dataIndex: 'integral'
        },
        {
            title: '累计积分',
            dataIndex: 'integralSum'
        },
        {
            title: '操作',
            dataIndex: 'operation',
            fixed: 'right',
            render: (text: string, record: DataType, index: number) => (
                <div className='table__operation'>
                    <span onClick={() => handleCleck(record)} style={{marginRight: 5,color: '#1E90FF',cursor: 'pointer'}}>详情</span>
                    <span style={{color: '#1E90FF',cursor: 'pointer'}}>冻结</span>
                </div>
            )
        }
    ];
    const navigate = useNavigate()
    //获取store中的数据
    const userlist = useSelector((state:any)=>state.userlist);
    const searchuserlist = useSelector((state:any)=>state.searchuserlist);

    //获取dispatch
    const dispatch = useDispatch();

    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [checked, setChecked] = useState(false);
    const [tableParams, setTableParams] = useState ({
        pagination: {
            current: 1,
            pageSize: 10,
        },
    });

    const handleCleck = (data: any) => {
        // 存数据
        dispatch({type: 'store_AdminPar',payload: data})
        // 跳转
        navigate('/index/Query/admin')
    }
    let data = []
    data = props.message


    // 获取数据总长度，用于全选功能
    let arr: string[] = []
    for (let i = 1; i <= data.length; i++) {
        arr.push(`${i}`)
    }



    // 复选
    const onChange = () => {
        console.log(rowSelection,arr)
        // console.log(rowSelection.selectedRowKeys, arr)
        if(rowSelection.selectedRowKeys.length !== 0){
            setSelectedRowKeys([])
        } else {
            setSelectedRowKeys(arr)
            // console.log(rowSelection)
        }

        if(rowSelection.selectedRowKeys.toString() == arr.toString()) {
            setChecked(false)
        } else if(rowSelection.selectedRowKeys.length !== 0){
            setSelectedRowKeys([])
            setChecked(false)
        } else {
            setChecked(true)
        }
    }

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        if(newSelectedRowKeys.toString() == arr.toString()) {
            setChecked(true)
        } else {
            setChecked(false)
        }
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };


    const handleTableChange = (e:any) => {
        console.log(e)
        const tabObj = {
            pagination: {
                current: e.current,
                pageSize: e.pageSize
            }
        }
        setTableParams(tabObj)
        console.log(tabObj.pagination)
        console.log(tableParams.pagination)
    }
    return (
        <div>
            <Table
                rowSelection={{
                    type: selectionType,
                    ...rowSelection,
                }}
                bordered
                scroll={{ x: 1500 }}
                columns={columns}
                dataSource={data}

                pagination={{
                    pageSize: tableParams.pagination.pageSize,
                    total: data.length,
                    showSizeChanger: true,
                    pageSizeOptions: ['10', '20'],
                }}

                onChange={handleTableChange}

                footer={() => (
                    <div className='tableFooter'>
                        <div>
                            {/*<Checkbox checked={checked} onChange={onChange}>全选</Checkbox>*/}
                        </div>
                        <span>批量操作</span>
                        <BacchOpe/>
                    </div>
                )}
            />
        </div>
    );
};

export default QueryTable;